<template>
  <div class="container" style="width:100%;height:100%;background:#f3f3f3;">
    <van-nav-bar :title="title" fixed class="titleStyle" left-arrow @click-left="onClickLeft" >
        <!-- <template #right>
        <van-icon name="search" class="search" @click="showPopup" />
      </template> -->
    </van-nav-bar>
        <!--  搜索条件 -->
    <van-popup v-model="showSerch" position="top" :style="{ paddingTop: '30px'}" @close="closeClick">
      <van-cell-group>
        <ul class="searchBox">
          <li>
            <div class="searchLeft">到货单号: </div>
            <div class="searchRight">
              <van-field v-model="search.invoiceNo" />
            </div>
          </li>
        
          <li>
            <div class="searchLeft">匹配物料名或物料编号: </div>
            <div class="searchRight">
              <van-field v-model="search.keyword" />
            </div>
          </li>
          <li>
            <div class="searchLeft">开始时间: </div>
            <div class="searchRight">
              <van-field v-model="search.carryCheckAtStart" readonly @click="timeChange(1)" />
            </div>
          </li>
          <li>
            <div class="searchLeft">结束时间: </div>
            <div class="searchRight">
              <van-field v-model="search.carryCheckAtEnd" readonly @click="timeChange(2)" />
            </div>
          </li>
        </ul>
        <div class="btn">
          <van-button type="primary" @click="getListInfo(1)">确定</van-button>
          <!-- <van-button type="primary" @click="resetSearchValue">重置</van-button> -->
        </div>
      </van-cell-group>
    </van-popup>
    <!-- 来料检列表-->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="已全部加载完成" class="van-clearfix" :immediate-check="false" @load="onLoad">
        <div class="contentBox">
          <div v-for=" item in list" :key="item.purchaseId" class="listDiv">
            <van-row style="width:100%;height:100%;">
              <div class="checkList">
                <h1>
                  <span>{{ item.invoiceNo }}</span>
                  <b>收货单号</b>
                </h1>
                <ul>
                  <li>
                    <b>收货日期：</b>
                    <span>{{ item.arrivalDate }}</span>
                  </li>
                  <li>
                    <b>供应商：</b>
                    <span>{{ item.supplier }}</span>
                  </li>
                 
                  <li>
                    <b>批次：</b>
                    <span>{{ item.planBatchNo }}</span>
                  </li>
                  <li>
                    <b>送检数量：</b>
                    <span>{{ item.incomingNum }}</span>
                  </li>
                  <li>
                    <b>送检时间：</b>
                    <span>{{ item.carryCheckAt }}</span>
                  </li>
                  <li>
                    <b>物料：</b>
                    <span>{{ item.materialName }}{{ item.materialCode !== '' ? '【' + item.materialCode + '】': '' }}</span>
                  </li>
                  <li>
                    <b>物料图号：</b>
                    <span> {{ item.figureNo }}</span>
                  </li>
                </ul>
                <div class="checkListBtn">
                  <van-button type="info" @click="InspectionEntry(item)">检验录入</van-button>
                </div>
              </div>
            </van-row>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <div v-show="list.length === 0 && loading === false" class="noDataAvailable noDataAvailable3" />
      <!--  时间选择 -->
    <van-popup v-model="showTime" position="bottom" :style="{ height: '30%' }">
      <van-calendar v-model="showTime" type="range" :min-date="minDate" @confirm="onTimeChange" @cancel="cancel" />
    </van-popup>
  </div>
</template>
<script>
import { myFunction } from '../../../utils/function'
export default {
  name: 'FirstInspection',
  data() {
    return {
      howTime: false,
      num: '',
      show: false,
      title: localStorage.getItem('name'),
      code: localStorage.getItem('code'),
      search: {
        current: 1,
        size: 5,
        status:0,
        invoiceNo:'',
        keyword:'',
        carryCheckAtStart:'',
        carryCheckAtEnd:'',
      },
      list: [],
      pages: 0,
      total: 0,
      loading: false,
      finished: false,
      isLoading: false,
      showSerch:false,
      showTime: false,
      minDate: new Date(2025, 0, 1),
    }
  },
  created() {
    // this.search.proBatchNo = this.$route.query.code
  },
  mounted() {
    this.getListInfo()
  },
  methods: {
        formatDate (date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    },
    onTimeChange (date) {
      const [start, end] = date
      if (this.num === 1) {
        this.search.carryCheckAtStart = myFunction(start).slice(0, 10)
      } else {
        this.search.carryCheckAtEnd = myFunction(start).slice(0, 10)
      }
      this.showTime = false
    },
       timeChange (num) {
      this.num = num
      this.showTime = true
    },
      cancel () {
      this.showTime = false
    },
       // 搜索条件展示
    showPopup () {
      this.showSerch = true
    },
       // 搜索弹窗关闭时
    closeClick () {
      this.showSerch = false
    },
    /* 获取页面数据 */
    async getListInfo(page) {
      if (page) this.search.current = page
      if (+page === 1) this.list = []
      this.loading = true
      const res = await this.$axios.post(
        '/dobo-product/pro/incoming/check/page',
        this.search
      )
      if (res.data.code === 200) {
        this.show = false
        const list = []
        res.data.data.list.filter((item) => {
          list.push(item)
        })
        this.list = this.list.concat(list) // 去重 合并
        const hash = {}
        // 数组去重
        this.list = this.list.reduce((preVal, curVal) => {
          /* eslint-disable-next-line */
          hash[curVal.id] ? '' : (hash[curVal.id] = true && preVal.push(curVal))
          return preVal
        }, [])
        this.total = res.data.data.total
        this.loading = false
        if (+this.list.length === +this.total) {
          this.finished = true
        }
      }
    },
    //   触底加载
    onLoad() {
      setTimeout(() => {
        if (this.list.length < this.search.current) {
          this.finished = true
          return
        }

        if (this.list.length === this.total) {
          this.finished = true
          return
        }
        let num
        num = this.search.current
        num++
        this.getListInfo(num)
      }, 1000)
    },
    //  下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.list = []
        this.total = 0
        this.finished = false
        this.getListInfo(1)
        this.isLoading = false
      }, 500)
    },
    /* 检验录入 */
    InspectionEntry(row) {
     
      this.$router.push('/incomingCheckInput')
      this.$store.commit('getDate', row)
    },
    // 返回
    onClickLeft() {
      this.$router.push('/Task')
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
}
</style>
<style lang='scss'>
</style>
